<template>
  <div id="ghsjAndssfaPingShenInsert">
    <el-tabs v-model="flag" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="1"></el-tab-pane>
      <el-tab-pane label="审查流程" name="2"></el-tab-pane>
    </el-tabs>
    <div class="MainBox1" v-show="flag=='2'">
      <optionList :optionListCode="optionListCode" />
    </div>
    <div class="MainBox" v-show="flag=='1'">
      <div class="boxItem">
        <div class="boxItem_title">
          <span class="tit">实施方案审定面积信息</span>
        </div>
        <div class="boxItem_content" style="padding-top:35px;">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">复垦点个数：</p>
                <p class="pContent">{{mainData.fkdgs}}个</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">实施规模：</p>
                <p class="pContent">{{mainData.ssgm}}公顷</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">预计减少建设用地面积：</p>
                <p class="pContent">{{mainData.yjjsj}}公顷</p>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">预计新增耕地面积：</p>
                <p class="pContent">{{mainData.yjzjg}}公顷</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">预计新增其他农用地面积：</p>
                <p class="pContent">{{mainData.yjzjq}}公顷</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="boxItem">
        <div class="boxItem_title">
          <span class="tit">预算投资</span>
        </div>
        <div class="boxItem_content" style="padding-top:35px;">
          <el-row :gutter="20">
            <el-col :span="2">工程施工费</el-col>
            <el-col :span="21">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="boxItem_content_row">
                    <p class="pTitle">拆除工程费：</p>
                    <p class="pContent">{{mainData.demolitionCost}}万元</p>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="boxItem_content_row">
                    <p class="pTitle">土地平整工程费：</p>
                    <p class="pContent">{{mainData.landLevelingCost}}万元</p>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="boxItem_content_row">
                    <p class="pTitle">农田水利工程费：</p>
                    <p class="pContent">{{mainData.farmlandWaterConservancyCost}}万元</p>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="boxItem_content_row">
                    <p class="pTitle">田间道路工程费：</p>
                    <p class="pContent">{{mainData.fieldRoadCost}}万元</p>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="boxItem_content_row">
                    <p class="pTitle">其他施工费：</p>
                    <p class="pContent">{{mainData.otherConstructingCost}}万元</p>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!-- <div class="boxItem_content_row">
            <div class="boxItem_content_row_item">
              <p>工程施工费：</p>
              <p>{{mainData.constructionCost}}万元</p>
            </div>
          </div>-->

          <el-row :gutter="20" class="boxItem_content_row marginBottom">
            <el-col :span="2">
              <p class="freeTitle">其他费用</p>
            </el-col>
            <el-col :span="22">
              <p class="freeTitle">{{mainData.otherCost}}万元</p>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="boxItem_content_row marginBottom">
            <el-col :span="2">
              <p class="freeTitle">不可预见费用</p>
            </el-col>
            <el-col :span="22">
              <p class="freeTitle">{{mainData.unforeseeableExpenses}}万元</p>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="boxItem_content_row marginBottom">
            <el-col :span="2">
              <p class="freeTitle">补偿费</p>
            </el-col>
            <el-col :span="22">
              <p class="freeTitle">{{mainData.compensation}}万元</p>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="boxItem_content_row marginBottom">
            <el-col :span="2">
              <p class="totalMoney">合计</p>
            </el-col>
            <el-col :span="22">
              <p class="totalMoney">{{mainData.totalInvestment}}万元</p>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="boxItem">
        <div class="boxItem_title">
          <span class="tit">区县初审意见</span>
        </div>
        <div class="boxItem_content" style="padding-top:35px;">
          <div class="options">
            <p>区县中心初审意见：</p>
            <div class="boxItem_content_row_item_noFlex_textarea">
              <el-input
                type="textarea"
                :rows="3"
                :readonly="isReadonly"
                v-model="quxianCenterOpinion"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <el-row class="options_row">
              <el-col :span="8">
                <div class="options_row_title">
                  <p>审查人：</p>
                  <div class="options_row_img">
                    <img :src="$https + quxianCenter" alt />
                    <!-- <el-input :disabled="true" v-model="quxianCenter" suffix placeholder="请输入内容"></el-input> -->
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="options_row_title">
                  <p>审查时间：</p>
                  <el-date-picker
                    v-model="quxianCenterDate"
                    type="date"
                    :readonly="isReadonly"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期时间"
                  ></el-date-picker>
                </div>
              </el-col>
              <el-col :span="8" v-if="!isReadonly">
                <div class="options_row_title">
                  <p>审查状态：</p>
                  <el-select v-model="quxianCenterStatus" placeholder="请选择">
                    <el-option label="同意" value="APPROVED"></el-option>
                    <el-option label="拒绝" value="REJECTED"></el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
            <div class="boxItem_content_row button_box" v-if="isQxzzBtn">
              <el-button
                class="button_box_item"
                @click="btnTijiao"
                :loading="isLoading"
                type="primary"
              >提交</el-button>
              <el-button class="button_box_item">取消</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryProjectConstructingPlanResult,
  saveDistrictCenterOpinion,
  getAuditOpinion
} from '@/api/ghsjAndssfaPingShen'
import { getTime } from '@/api/getTime'
import { findById } from '@/api/common'
import optionList from '@/components/optionList'
export default {
  components: {
    optionList
  },
  data() {
    return {
      optionListCode: 'ConstructingPlanResultFirstAudit',
      value1: '',
      input: '',
      fuzerenCehui: '', //测绘负责人
      fuzerenCehuiJishu: '', //测绘技术负责人
      mainData: '', //主要数据
      quxianCenterOpinion: '', //区县中心意见
      quxianCenter: '', //签字
      quxianCenterDate: '', //日期
      quxianCenterStatus: '', //状态

      isLoading: false,
      isReadonly: false,
      isQxzzBtn: false,

      userIcon: '', //用户签名照
      flag: '1'
    }
  },
  created() {
    this.quxianCenterDate = getTime()
    this.getData()
    this.getOpinion()
    if (
      localStorage.getItem('router') ==
      'CONSTRUCTING_PLAN_RESULT_FIRST_AUDIT_FIRST_OPINION'
    ) {
      this.isReadonly = false
      if (localStorage.getItem('menusName') == 'ROLE_QXZZJG') {
        this.isReadonly = false
        this.isQxzzBtn = true
      } else {
        this.isReadonly = true
        this.isQxzzBtn = false
      }
    } else {
      this.isReadonly = true
      this.isQxzzBtn = false
    }

    if(localStorage.getItem("lookStatus") == 2){
      this.isReadonly = true
      this.isQxzzBtn = false
    }
  },
  methods: {
    //切换选项卡
    handleClick(tab, event) {
      console.log(tab, event)
    },
    //获取用户信息
    userInfo() {
      var data = {
        id: localStorage.getItem('userId')
      }
      findById(data).then(res => {
        console.log(res, '用户信息')
        this.userIcon = res.data.signedPhoto
      })
    },
    getOpinion() {
      let obj = {
        projectId: localStorage.getItem('projectId')
      }
      getAuditOpinion(obj).then(res => {
        this.quxianCenterOpinion = res.data.districtCenterCheckOpinion
        this.quxianCenter =
          res.data.districtCenterAuditor != null
            ? res.data.districtCenterAuditor.signedPhoto
            : this.$store.state.user.userInfo.signedPhoto
        this.quxianCenterDate =
          res.data.districtCenterCheckDate != null
            ? res.data.districtCenterCheckDate
            : getTime()
        this.quxianCenterStatus = res.data.districtCenterAuditResult
      })
    },

    btnTijiao() {
      let obj = {
        projectId: localStorage.getItem('projectId'),
        checkOpinion: this.quxianCenterOpinion,
        checkCensorId: localStorage.getItem('userId'),
        checkDate: this.quxianCenterDate,
        auditResult: this.quxianCenterStatus
      }
      this.isLoading = true
      saveDistrictCenterOpinion(obj)
        .then(res => {
          this.isLoading = false
          if (res.code == 1000) {
            this.$alert('当前流程办理完成', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.$router.push({
                  path: '/xmkgh/ywdeal'
                })
              }
            })

            this.getOpinion()
            this.$refs.optionList.getProgress()
          }
        })
        .catch(error => {
          this.isLoading = false
        })
    },
    getData() {
      var data = {
        projectId: localStorage.getItem('projectId')
      }
      queryProjectConstructingPlanResult(data).then(res => {
        this.mainData = res.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#ghsjAndssfaPingShenInsert {
  padding: 30px;
  box-sizing: border-box;
}
#ghsjAndssfaPingShenInsert .boxItem {
  width: 100%;
  background-color: #fff;
}
#ghsjAndssfaPingShenInsert .boxItem_title {
  width: 100%;
  background: #f8f8f8;
  height: 50px;
  border: 1px solid #efefef;
  overflow: hidden;
  color: #333;
  font-size: 18px;
  font-weight: bold;
  text-indent: 20px;
  line-height: 50px;
}
#ghsjAndssfaPingShenInsert .boxItem_content {
  width: 100%;
  border: 1px solid #ebebeb;
  border-top: none;
  padding: 30px;
  padding-top: 0;
  box-sizing: border-box;
}
#ghsjAndssfaPingShenInsert .boxItem_content_row {
  display: flex;
  align-items: center;
  line-height: 22px;
}
#ghsjAndssfaPingShenInsert .boxItem_content_row_item {
  display: flex;
  align-items: center;
}
#ghsjAndssfaPingShenInsert .boxItem_content_row_item:nth-child(2n-1) {
  margin-right: 300px;
}
#ghsjAndssfaPingShenInsert .boxItem_content_row_item p {
  font-size: 14px;
  line-height: 36px;
  width: 182px;
}
#ghsjAndssfaPingShenInsert .boxItem_content_row_item_noFlex {
  display: flex;
  width: 100%;
}
#ghsjAndssfaPingShenInsert .boxItem_content_row_item_noFlex p {
  font-size: 14px;
  line-height: 36px;
  width: 140px;
}
#ghsjAndssfaPingShenInsert .boxItem_content_row_item p:first-child {
  color: #444;
  font-weight: bold;
}
#ghsjAndssfaPingShenInsert .boxItem_content_row_item p:last-child {
  color: #666;
}
#ghsjAndssfaPingShenInsert .uploadDownLoadBox_item {
  margin: 20px 0;
}
#ghsjAndssfaPingShenInsert .uploadDownLoadBox_item p {
  width: 140px;
}
#ghsjAndssfaPingShenInsert .button_box {
  margin-top: 54px;
}
#ghsjAndssfaPingShenInsert .button_box_item {
  margin-right: 10px;
}
#ghsjAndssfaPingShenInsert .boxItem_content_row_item_input {
  position: relative;
}
#ghsjAndssfaPingShenInsert
  .boxItem_content_row_item_input
  /deep/
  .el-input__inner {
  padding-right: 50px;
}
#ghsjAndssfaPingShenInsert .boxItem_content_row_item_input span {
  position: absolute;
  right: 10px;
  top: 3px;
  height: 36px;
  line-height: 36px;
  z-index: 1;
  color: #999;
}
#ghsjAndssfaPingShenInsert .table-doc-view {
  border-collapse: collapse;
}
#ghsjAndssfaPingShenInsert .table-doc-view tr,
.table-doc-view td {
  border: 1px solid #ccc;
  padding: 10px 10px;
}
#ghsjAndssfaPingShenInsert .table-doc-view tr,
.table-doc-view td {
  border: 1px solid #ccc;
  padding: 10px 10px;
}
#ghsjAndssfaPingShenInsert .table-doc-view td {
  font-size: 14px;
  color: #444;
  min-height: 30px;
}
#ghsjAndssfaPingShenInsert .table-doc-view .taoc-title {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
#ghsjAndssfaPingShenInsert .table-doc-view .taoc-center {
  text-align: center;
}
#ghsjAndssfaPingShenInsert .boxItem_content_row_item_noFlex_textarea {
  width: 90%;
}
#ghsjAndssfaPingShenInsert .shencharen {
  display: flex;
  margin-right: 102px;
  align-items: center;
}
#ghsjAndssfaPingShenInsert .shencharen img {
  width: 105px;
  height: 59px;
}
#ghsjAndssfaPingShenInsert .shencharenTime {
  display: flex;
  align-items: center;
}
#ghsjAndssfaPingShenInsert .shencharenTime p {
  width: 80px;
}
#ghsjAndssfaPingShenInsert .boxItem_content_row_shenhe {
  margin: 30px 0;
}
#ghsjAndssfaPingShenInsert .tableBoxData_title {
  width: 100%;
  display: block;
  overflow: hidden;
  font-size: 20px;
  font-weight: bold;
  color: #444;
  text-align: center;
  margin-bottom: 10px;
}
.tableBoxData_mainData {
  width: 100%;
  display: flex;
  justify-content: center;
}
.tableBoxData_button_box {
  width: 100%;
  display: flex;
  justify-content: center;
}
.tableBoxData_button_box_item {
  margin: 0px 20px;
  margin-bottom: 20px;
  margin-top: 10px;
}
.noPiankuanList {
  width: 100%;
  box-sizing: border-box;
  padding-left: 50px;
  font-size: 20px;
  padding-top: 10px;
  text-align: center;
  color: #999;
}
#ghsjAndssfaPingShenInsert .boxItem_content_row_child {
  display: flex;
  align-items: center;
  margin-left: 130px;
}
#ghsjAndssfaPingShenInsert .boxItem_content_row_child_item {
  display: flex;
  align-items: center;
  margin-right: 50px;
}
#ghsjAndssfaPingShenInsert .boxItem_content_row_child p {
  font-size: 14px;
  line-height: 36px;
}
#ghsjAndssfaPingShenInsert .boxItem_content_row_child_second_item {
  margin-right: 12%;
}
#ghsjAndssfaPingShenInsert .boxItem_content_row_child_second_item p {
  width: 120px;
}
.options {
  font-size: 13px;
  font-weight: bold;
  color: #444;
  margin-bottom: 20px;
}
.options_row {
  margin-top: 15px;
  display: flex;
  align-items: center;
}
.options_row_title {
  display: flex;
  align-items: center;
}
.options_row_img img {
  width: 105px;
  height: 59px;
  margin-left: 20px;
}
.options_select {
  margin: 10px 0px;
}
.boxItem_content_row_item p:first-child {
  text-align: right;
  margin-right: 10px;
}
.boxItem_content_row_child_second_item p:first-child {
  text-align: right;
  margin-right: 10px;
}
.pTitle,
.options_row_title p,
.options p {
  font-size: 14px;
  color: #606266;
  font-weight: bold;
}
.pContent {
  font-size: 14px;
  color: #606266;
  margin-left: 10px;
}
.freeTitle {
  font-size: 15px;
  font-weight: bold;
  color: #666;
}
.totalMoney {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
</style>
 